<!-- 首页 -->
<template>
	<view class="container">
		<!-- 头部 start -->
		<view class="head">
			<home-head @toCenter="toCenter"></home-head>
			<swiper class="swiper-box" :indicator-dots="false" :autoplay="true" :interval="3000" :duration="1000">
				<swiper-item v-for="(item, index) in bannerList" :key="index">
					<navigator :url="item.url" hover-class="none" class="swiper-item">
						<image :src="item.img" class="banner"></image>
					</navigator>
				</swiper-item>
			</swiper>
		</view>
		<!-- 头部 end -->

		<!-- 公告 start  horizontal -->
		<view class="notice-box">
			<u-notice-bar mode="vertical" type="warning" :list="notice_list" :more-icon="true"></u-notice-bar>
		</view>
		<!-- 公告 end -->

		<!-- 头部按钮 start -->
		<view class="nav">
			<u-grid :col="4" :border="false">
				<u-grid-item bg-color="transparent" v-for="(item, index) in navButton" :key="index">
					<view class="nav-item" @click="jump(index,item.url)">
						<image :src="item.img" mode="widthFix" class="nav-item-img"></image>
						<view class="nav-item-name">{{ item.name }}</view>
					</view>
					
				</u-grid-item>
			</u-grid>
		</view>
		<!-- 头部按钮 end -->

		<!-- 三个币种 start -->
		<coin-tab></coin-tab>
		<!-- 三个币种 end -->
		<u-gap height="20" bg-color="#101334"></u-gap>

		<!-- 我的资产 start -->
		<home-asset></home-asset>
		<!-- 我的资产 end -->

		<!-- 默认前十种币种 start-->
		<coin-list></coin-list>
		<!-- 默认前十种币种 end-->
		<!-- <u-tabbar :list="tabbarArr" :mid-button="true" bg-color="#101334"></u-tabbar> -->
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from "vuex";

	import homeHead from '@/components/home/home-head.vue';
	import coinList from '@/components/home/coin-list.vue';
	import coinTab from '@/pages/test/quant.vue';
	import homeAsset from '@/components/home/home-asset.vue';

	export default {
		computed:{
			...mapState('tabbar', ['tabbarArr']),
		},
		components: {
			coinList,
			coinTab,
			homeAsset,
			homeHead
		},
		data() {
			return {
				// tabbar

				position: "",
				positionArr: [],
				status: "loadmore",
				list: 15,
				page: 0,
				keyword: "",
				focus: false,
				bannerList: [{
						id: "1",
						img: "/static/images/home/banner.png",
						url: "",
					},
					{
						id: "2",
						img: "/static/images/home/banner.png",
						url: "",
					},
					{
						id: "3",
						img: "/static/images/home/banner.png",
						url: "",
					},
				],
				noticeList: [],
				newsList: [{}, {}],
				// 头部导航
				navButton: [{
						name: "策略商城",
						img: "/static/images/home/n1.png",
						url: "/pages/coin/quantization",
					},
					{
						name: "邀请有礼",
						img: "/static/images/home/n2.png",
						url: "/pages/share/share",
					},
					{
						name: "充值中心",
						img: "/static/images/home/n3.png",
						url: "/pages/system/charge",
					},
					{
						name: "我的策略",
						img: "/static/images/home/n4.png",
						url: "/pages/coin/quantization",
					},
				],
				// notice
				notice_list: [
					"巴西“比特币大王”被捕，涉嫌侵占3亿美元资产",
					"DeFi半年报：独立地址增速放缓，但总锁仓量仍增长超300%",
				],
			};
		},
		mounted() {
			console.log("mounted index");

		},
		onLoad() {
			console.log('onLoad index', this.tabbarArr)
			
		},
		methods: {
			// ...mapMutations(["setTickers", "setUsdtprice"]),
			getMore() {},

			toCenter() {
				this.$emit('toCenter')
			},
			toQuant() {
				this.$emit('toQuant')
			},
			jump(index, url) {
				if(index == 1 || index == 2){
					this.$u.func.route(url)
				} else if(index == 3){
					// this.$emit('toQuant',1)
					uni.setStorageSync('current',1);
					console.log('current',  uni.getStorageSync('current'))
					this.$u.func.route2(url)
				} else {
					this.$u.func.route2(url)
				}
				
			}
		},
	};
</script>

<style lang="scss" scoped>
	.container {
		background-color: #101334;
		color: aliceblue;
		min-height: 100vh;
		overflow: hidden;
	}

	.head {
		position: relative;
		top: 0;
		left: 0;
		z-index: 1;
	}



	.swiper-box {
		margin: 10rpx auto 0;
		width: 710rpx;
		height: 253rpx;

		.swiper-item {
			width: 100%;
			height: 100%;

			.banner {
				width: 100%;
				height: 100%;
			}
		}
	}

	// <!-- 头部按钮 start -->
	.nav {
		margin: 0rpx 0;
		box-sizing: border-box;
		padding: 0 0rpx;

		&-item {
			width: 100%;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-between;
			height: 130rpx;

			&-img {
				width: 80rpx;
				height: 80rpx;
			}

			&-name {
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: aliceblue;
			}
		}
	}

	// 公告
	.notice-box {
		align-items: center;
		background: #101334;
		border-radius: 20px 20px 20px 20px;
		margin: 0rpx 10rpx;
		padding: 30rpx 10rpx;
	}
</style>
